<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
        <title>OpenLayers Client Zoom Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../lib/Firebug/firebug.js"></script>
		<script src="../lib/OpenLayers.js"></script>
        <script src="clientzoom.js"></script>
        <style>
            .olControlAttribution {
                bottom: 5px;
            }
            #map {
                width: 600px;
                height: 400px;
            }
        </style>
    </head>
    <body onload="init();">
        <h1 id="title">Client Zoom</h1>
        <div id="tags">
            client zoom continuous zooming
        </div>
        <p id="shortdesc">

            This example demonstrates the <strong>"client zoom"</strong>
            functionality, where OpenLayers stretches the layer div when the
            resolution is not supported by that layer's tile service.

        </p>

        <div id="map"></div>

        <div id="docs">

            <p>

            The map of this example is configured with 22 resolutions, while
            the OSM tile server supports the first 19 resolutions only. When
            the zoom level is 19, 20 or 21 "client zoom" is applied to the OSM
            layer, i.e. the OSM layer div is stretched as necessary.  The map's
            initial zoom is 18. So if you zoom in using the zoom bar's "+"
            button you'll effectively trigger "client zoom".

            </p>

            <p>

            For demonstration purpose the map of this example has
            <code>fractionalZoom</code> set to true. So "client zoom" also
            applies if you choose arbitrary zoom levels using the slider of the
            zoom bar, or shift-drag boxes to zoom to arbitrary extents.
            "client zoom" therefore allows continuous zooming for tiled layers.

            </p>

            <p>

            Enabling "client zoom" on a layer is done by passing
            <code>serverResolutions</code> to the layer constructor.
            <code>serverResolutions</code> is the list of resolutions supported
            by the tile service. See the <a href="clientzoom.js"
                target="_blank"> clientzoom.js source</a>.

            </p>
        </div>
    </body>
</html>
